import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Flex } from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import Calendar from 'components/Calendar'
import planDateImg from "assets/images/planDateImg.png"
import {callApi} from 'app/utils'


export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      info:{},
      dateInfo:{
        year:new Date().getFullYear(),
        month:new Date().getMonth()+1,
        day:new Date().getDate(),
      },
      tag:[],
      repaymentList:[]
    };
   
    this.selectDate = this.selectDate.bind(this)
    this.previousMonth = this.previousMonth.bind(this)
    this.nextMonth = this.nextMonth.bind(this)
   
  }

  
  //上一个月
  previousMonth(a,b,c,d,e){
    console.log(a,b,c,d,e,'上一个月')
    let {dateInfo} = this.state
   this.requestMonth(a,b)
  }
  
  requestMonth(year,month){
    callApi('/account/payback/summary',{token: JSON.parse(localStorage.getItem('userData')).token,yearmonth: `${year}-${this.p(month)}`},"POST").then(data=>{
      console.log(data)
      if(data.success==true){
        this.setState({
          info:data.data
        })
        this.setState({
          tag:data.data.day
        })
        
      }
    })
  }

  //下一个月
  nextMonth(a,b,c,d,e){
    console.log(a,b,c,d,e,'下一个月')
    this.requestMonth(a,b)
  }

  p(val){
    if((val-0)<10){
      return '0'+val
    }else{
      return val
    }
  }

//选择日期
  selectDate(a,b,c){
    let that = this
    console.log(a,b,c)
  
    callApi('/account/payback/detail',{
      token: JSON.parse(localStorage.getItem('userData')).token,
      date: `${a}-${this.p(b)}-${this.p(c)}`
    },"POST").then((data)=>{
      console.log(data)
      that.setState({
        repaymentList:data.data.loanPhaseList
      })
    })
  } 

  
  componentDidMount() {
    let {dateInfo} = this.state
    this.requestMonth(dateInfo.year,dateInfo.month)
    this.selectDate(dateInfo.year,dateInfo.month,dateInfo.day)
  }

  render() {
    
    return (
      <div className={`${s.calendarBox}`}>
        <AxHeader/>
        <Flex className={`${s.oneBox}`}>
        待收总额（元）： {this.state.info.totalEarningAmount}
        </Flex>
        <div className={`${s.twoBox}`}>
          <Flex className={`${s.two}`} direction="row" justify="center">

         
          <Calendar onSelectDate={this.selectDate} 
                year={this.state.dateInfo.year} 
                month={this.state.dateInfo.month} 
                day={this.state.dateInfo.day} 
                tags={this.state.tag} 
                previousMonth={this.previousMonth}
                nextMonth={this.nextMonth}/>

          </Flex>
        </div>
        <div className={`${s.threeBoxPar}`}>
        <Flex className={`${s.threeBox}`}>
          <Flex.Item>
              <div className={`${s.top}`}>{this.state.info.monthTotalAmount}</div>
              <div className={`${s.bot}`}>本月应收(元)</div>
          </Flex.Item>
          <Flex.Item>
              <div className={`${s.top}`}>{this.state.info.monthEarnedAmount}</div>
              <div className={`${s.bot}`}>本月已收(元)</div>
          </Flex.Item>
        </Flex>

        <Flex className={`${s.listBox}`} direction="column">
          {JSON.stringify(this.state.repaymentList)=='[]'?null: this.state.repaymentList.map((item,index)=>{
            return (<Flex.Item className={`${s.item}`} key={index}>
            <Flex.Item className={`${s.top}`} >
                <div className={`${s.left}`}>{item.dueDate}</div>
                <div className={`${s.right}`}>{item.plannedTermAmount}</div>
            </Flex.Item>
            <Flex.Item className={`${s.bot}`}>
                <div className={`${s.left}`}>{item.title}</div>
                <div className={`${s.center}`}>期数<span>{item.phaseNumber}/{item.phaseCount}</span></div>
                <div className={`${s.right}`}>利息</div>
            </Flex.Item>
            {item.isRepaid==0?null:<img className={`${s.img}`} src={planDateImg}/>}
          </Flex.Item>)
          })
          }
        </Flex>

        </div>
        <AxFooter base={true}/>
      </div>
    );
  }
}
